<!--组件之间的切换-->

<!--引入vue框架-->
<script src="vue.js"></script>

<!--界面显示-->
<div id="app">
    <a href="#" @click.prevent="flag?flag:flag=!flag">登录</a>
    <a href="#" @click.prevent="flag?flag:flag=!flag">注册</a>
    <login v-if="flag"></login>
    <reg v-else></reg>
</div>
<!--定义脚本-->
<script>
    <!--登录界面模板-->
    <template id="loginTmp">
        <div>
            <table border="1">
                <tr>
                    <td><label>用户名</label></td>
                    <td><input type="text" id="username" maxlength="20"/></td>
                </tr>
                <tr>
                    <td><label>密码</label></td>
                    <td><input type="password" id="pwd1" maxlength="20"/></td>
                        
                </tr>
                <tr>
                    <td colspan="2">
                        <button @click="tijiao">登录</button>
                        
                        </td>    
                </tr>
                </table>
                
                </div>
        </template>


    //注册登录组件
    Vue.component("login",{
        //在模版中在外层一定放一个div
        //template:'<div>登录页面</div>'
        template:'#loginTmp',
        methods:{
            tijiao(){
                alert("准备登陆");
            }
        }
    })
    //注册注册组件
    Vue.component("reg",{
        //在模版中在外层一定放一个div
        //template:'<div>注册页面</div>'
        template:'#regTmp',
        methods:{
            zhuce(){
                console.log("登录信息注册")
            }
        }
    })
    var vue=new Vue({
        el:'#app',
        data:{
            flag:true,
        }
    })
</script>